<template>
	<div class="pay-result">
		<!-- 左侧 -->
		<div class="pay-result-left">
			<!-- 标题 -->
			<div>出售USDT</div>
			<template v-for="item in payList" :key="item.id">
				<div class="pay-result-left-item">
					<div>
						<div>
							<div class="flex items-center">
								<p class="pay-result-left-item-p" :style="{ backgroundColor: item.color }"></p>
								<p style="font-size: 16px;color:#000;">{{ item.name }}</p>
							</div>
							<p style="font-size: 16px;color:#000;margin-top: 8px;">1USDT=7.23CNY</p>
						</div>
						<img src="/transaction/c2c/quick/radio-select.svg" alt=""
							style="width: 24px;height:24px;cursor: pointer;" v-if="item.id != pay"
							@click="payClick(item.id)" />
						<img src="/transaction/c2c/quick/radio-selected.svg"
							style="width: 24px;height:24px;cursor: pointer;" alt="" v-else>
					</div>
					<!-- 账户信息 -->
					<div v-if="item.id == pay">
						<p class="mt-10px" 
						style="color:#86909C;font-size: 14px;">收款账户</p>
						<div class="flex items-center mt-8px">
							<p class="mr-10px">1355289889</p>
							<p class="mr-10px"> 夏天</p>
							<p class="mr-10px">
								<el-icon style="width: 12px;height: 12px;">
									<ArrowRightBold />
								</el-icon>
							</p>
						</div>
					</div>
				</div>
				<div v-if="item.id == 1" class="pay-result-left-item-ad">
					<div>
						<p style="color:#86909C;font-size:16px;">广告方</p>
						<div class="flex items-center">
							<div class="flex items-center pay-result-left-item-tag mt-10px">
								<img src="/vite.svg" style="width: 18px;height:18px;border-radius: 50%;" alt="">
								<p class="ml-10px">金玉满堂-包赚</p>
							</div>
							<p class="ml-10px mt-10px" style="color:#86909C;font-size:16px;">累计已完成2000笔订单</p>
						</div>
					</div>
					<div>
						<p class="mt-10px" style="color:#86909C;font-size:16px;">广告方要求<span style="color:red;">*</span></p>
						<div class="pay-result-left-item-text mt-10px" @click="dialogVisible = true">
							【小荷包收款，介意勿拍】1.实名付款:请确保使用与平台实名信息一致呢账户付款，否则概不放行!2.安全提示:不参与帮人代买、跑分、洗钱、高额返利、资金盘或搬砖套利、网络交友等骗局和违法犯罪行为;禁止将任何不法资金(如赌博、跑分、资金盘、诈骗等)用于数字货币交易，一经发现立刻报警处理。3.免责声明:此次交易为双方平等自愿的真实交易，交易过后买家的后续操作与卖家无关，所产生的一切法律责任由买家自己负责。
						</div>
					</div>
				</div>
			</template>
		</div>
		<!-- 右侧 -->
		<div class="pay-result-right">
			<div class="pay-result-right-title">
				预览订单
			</div>
			<div class="pay-result-right-item mt-20px">
				<p>您将支付</p>
				<p class="item-content">100.00 CNY</p>
			</div>
			<div class="pay-result-right-item mt-20px">
				<p>您将收到</p>
				<p class="item-content">100.00 USDT</p>
			</div>
			<div class="pay-result-right-item mt-20px">
				<p>付款时限</p>
				<p class="item-time-content">30分钟</p>
			</div>
			<div class="mt-100px mb-40px">
				<el-button type="primary" color="#F34E5F"
					style="width: 100%;height: 50px;border-radius: 10px;font-size: 18px;color:#fff;" @click="payBtnClick">
					{{ payBtn }}
				</el-button>
			</div>
		</div>
		<!-- 广告商弹窗 -->
		<el-dialog v-model="dialogVisible" width="500px" :show-close="false">
			<template #header="{ close }">
				<div class="flex items-center justify-between">
					<div style="font-size: 18px;color:#000;font-weight: bold;">
						要求与条款
					</div>
					<el-icon class="el-icon--left" @click="close">
						<CloseBold />
					</el-icon>
				</div>
			</template>
			<template #default>
				<div>
					<div class="mt-20px mb-50px" style="font-size: 14px;color:#000;line-height: 30px;">
						【小荷包收款，介意勿拍】1.实名付款:请确保使用与平台实名信息一致呢账户付款，否则概不放行!2.安全提示:不参与帮人代买、跑分、洗钱、高额返利、资金盘或搬砖套利、网络交友等骗局和违法犯罪行为;禁止将任何不法资金(如赌博、跑分、资金盘、诈骗等)用于数字货币交易，一经发现立刻报警处理。3.免责声明:此次交易为双方平等自愿的真实交易，交易过后买家的后续操作与卖家无关，所产生的一切法律责任由买家自己负责。
					</div>
					<el-button type="primary" color="#114CEE"
						style="width: 100%; height:50px;font-size:18px;border-radius: 10px;" @click="dialogVisible = false">
						好的</el-button>
				</div>
			</template>
		</el-dialog>
		<Payment :visible="paymentShow" @close="closePayment"></Payment>
	</div>
</template>
<script lang="ts" setup>
import Payment from './Payment.vue';

const paymentShow = ref<boolean>(false);
// 关闭payment
const closePayment = (val: boolean) => {
	paymentShow.value = val;
}
const payList = ref<any>([
	{
		id: '1',
		color: "#1187EE",
		name: "支付宝",
	},
	{
		id: '2',
		color: "#11EE45",
		name: "微信",
	},
	{
		id: '3',
		color: "#FC9559",
		name: "银行借记卡",
	}
]);

// 选中的支付方式
const pay = ref<any>('1');

// 点击支付方式
const payClick = (id: any) => {
	pay.value = id;
};
// 支付按钮显示
const payBtn = ref<string>("");
const payBtnTime = ref<number>(30);

const payBtnTimeStart = () => {
	payBtn.value = `下单(${payBtnTime.value}s)`;
	const getSetInterval = setInterval(() => {
		if (payBtnTime.value > 0) {
			payBtnTime.value--;
			payBtn.value = `下单(${payBtnTime.value}s)`;
		} else {
			payBtnTime.value = 30;
			payBtn.value = '刷新价格';
			clearInterval(getSetInterval);
		}
	}, 1000)
}

// 点击刷新价格
const payBtnClick = () => {
	if (payBtn.value == '刷新价格') {
		payBtnTimeStart();
	}else{
		paymentShow.value = true;
	}
}
// 广告商弹窗
const dialogVisible = ref<boolean>(true);
onMounted(() => {
	payBtnTimeStart();
})
</script>
<style lang="scss" scoped>
.pay-result {
	display: flex;
	justify-content: space-between;
	align-items: start;
	padding: 0 40px;

	.pay-result-left {
		>div:nth-child(1) {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: bold;
			font-size: 34px;
			color: #000000;
			margin-bottom: 40px;
		}

		.pay-result-left-item {
			border-radius: 10px 10px 10px 10px;
			border: 1px solid #E5E6EB;
			padding: 20px 10px;
			margin-bottom: 20px;
			width: 560px;
			>div:nth-child(1) {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10px;
			}
			>div:nth-child(2){
				border-top: 1px solid #E5E6EB;
			}

			.pay-result-left-item-p {
				width: 4px;
				height: 14px;
				margin-right: 10px;
			}
		}

		.pay-result-left-item-ad {
			border-radius: 10px 10px 10px 10px;
			border: 1px solid #E5E6EB;
			margin-bottom: 20px;
			width: 560px;
			padding: 20px 10px;


			.pay-result-left-item-tag {
				background: #E4EBFF;
				border-radius: 10px 10px 10px 10px;
				font-size: 16px;
				width: 154px;
				height: 32px;
				box-sizing: border-box;
				color: #114CEE;
				padding: 8px;
			}

			.pay-result-left-item-text {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 16px;
				color: #000000;
				width: 100%;
				/* 禁止文本换行 */
				overflow: hidden;
				font-size: 16px;

				/* 隐藏溢出的文本 */
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.pay-result-right {
		width: 560px;
		border: 1px solid #E5E6EB;
		border-radius: 10px 10px 10px 10px;
		margin-left: 20px;
		padding: 20px;

		.pay-result-right-title {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: 400;
			font-size: 18px;
			color: #000000;
		}

		.pay-result-right-item {
			display: flex;
			align-items: center;
			justify-content: space-between;

			>p:nth-child(1) {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 14px;
				color: #86909C;
			}

			.item-content {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: bold;
				font-size: 14px;
				color: #000000;
			}

			.item-time-content {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 14px;
				color: #000000;
			}
		}
	}
}
</style>
